<!DOCTYPE html>
<html lang="zh">
<head>
    <?php view_include('header'); ?>
    <title>按钮示例 | <?=params('site_name')?></title>
</head>
<body class="gray-bg">
<div class="row wrapper wrapper-content animated fadeInRight">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-header d-block">
                <h4 class="card-title">Buttons</h4>
                <p class="mb-0 subtitle">Default button style</p>
            </div>
            <div class="card-body">
                <button type="button" class="btn btn-primary">Primary</button>
                <button type="button" class="btn btn-secondary">Secondary</button>
                <button type="button" class="btn btn-success">Success</button>
                <button type="button" class="btn btn-danger">Danger</button>
                <button type="button" class="btn btn-warning">Warning</button>
                <button type="button" class="btn btn-info">Info</button>
                <button type="button" class="btn btn-light">Light</button>
                <button type="button" class="btn btn-dark">Dark</button>
            </div>
        </div>
    </div>
    <div class="col-lg-12">
        <div class="card">
            <div class="card-header d-block">
                <h4 class="card-title">Buttons</h4>
                <p class="mb-0 subtitle">Button Light style</p>
            </div>
            <div class="card-body">
                <button type="button" class="btn light btn-primary">Primary</button>
                <button type="button" class="btn light btn-secondary">Secondary</button>
                <button type="button" class="btn light btn-success">Success</button>
                <button type="button" class="btn light btn-danger">Danger</button>
                <button type="button" class="btn light btn-warning">Warning</button>
                <button type="button" class="btn light btn-info">Info</button>
                <button type="button" class="btn light btn-light">Light</button>
                <button type="button" class="btn light btn-dark">Dark</button>
            </div>
        </div>
    </div>
    <div class="col-lg-12">
        <div class="card">
            <div class="card-header d-block">
                <h4 class="card-title">Outline Buttons</h4>
                <p class="mb-0 subtitle">Default outline button style</p>
            </div>
            <div class="card-body">
                <button type="button" class="btn btn-outline-primary">Primary</button>
                <button type="button" class="btn btn-outline-secondary">Secondary</button>
                <button type="button" class="btn btn-outline-success">Success</button>
                <button type="button" class="btn btn-outline-danger">Danger</button>
                <button type="button" class="btn btn-outline-warning">Warning</button>
                <button type="button" class="btn btn-outline-info">Info</button>
                <button type="button" class="btn btn-outline-light">Light</button>
                <button type="button" class="btn btn-outline-dark">Dark</button>
            </div>
        </div>
    </div>
    <div class="col-lg-12">
        <div class="card">
            <div class="card-header d-block">
                <h4 class="card-title">Button Sizes</h4>
                <p class="mb-0 subtitle">add <code>.btn-lg .btn-sm .btn-xs</code> to change the style
                </p>
            </div>
            <div class="card-body">
                <button type="button" class="btn btn-primary btn-lg">Large Button</button>
                <button type="button" class="btn btn-primary">Default Button</button>
                <button type="button" class="btn btn-primary btn-sm">Small Button</button>
                <button type="button" class="btn btn-primary btn-xs">Extra Small Button</button>
                <button type="button" class="btn btn-primary btn-xxs">Extra Small Button</button>
            </div>
        </div>
    </div>
    <div class="col-lg-12">
        <div class="card">
            <div class="card-header d-block">
                <h4 class="card-title">Outline Button Sizes</h4>
                <p class="mb-0 subtitle">add <code>.btn-lg .btn-sm .btn-xs</code> to change the style
                </p>
            </div>
            <div class="card-body">
                <button type="button" class="btn btn-outline-primary btn-lg">Large button</button>
                <button type="button" class="btn btn-outline-primary">Default button</button>
                <button type="button" class="btn btn-outline-primary btn-md">Small button</button>
                <button type="button" class="btn btn-outline-primary btn-sm">Small button</button>
                <button type="button" class="btn btn-outline-primary btn-xs">Extra small button</button>
            </div>
        </div>
    </div>
    <div class="col-lg-12">
        <div class="card">
            <div class="card-header d-block">
                <h4 class="card-title">Rounded Buttons</h4>
                <p class="mb-0 subtitle">add <code>.btn-rounded</code> to change the style</p>
            </div>
            <div class="card-body">
                <h4 class="card-title"></h4>
                <button type="button" class="btn btn-rounded btn-primary">Primary</button>
                <button type="button" class="btn btn-rounded btn-secondary">Secondary</button>
                <button type="button" class="btn btn-rounded btn-success">Success</button>
                <button type="button" class="btn btn-rounded btn-danger">Danger</button>
                <button type="button" class="btn btn-rounded btn-warning">Warning</button>
                <button type="button" class="btn btn-rounded btn-info">Info</button>
                <button type="button" class="btn btn-rounded btn-light">Light</button>
                <button type="button" class="btn btn-rounded btn-dark">Dark</button>
            </div>
        </div>
    </div>
    <div class="col-lg-12">
        <div class="card">
            <div class="card-header d-block">
                <h4 class="card-title">Rounded outline Buttons</h4>
                <p class="mb-0 subtitle">add <code>.btn-rounded</code> to change the style</p>
            </div>
            <div class="card-body">
                <div class="rounded-button">
                    <button type="button" class="btn btn-rounded btn-outline-primary">Primary</button>
                    <button type="button" class="btn btn-rounded btn-outline-secondary">Secondary</button>
                    <button type="button" class="btn btn-rounded btn-outline-success">Success</button>
                    <button type="button" class="btn btn-rounded btn-outline-danger">Danger</button>
                    <button type="button" class="btn btn-rounded btn-outline-warning">Warning</button>
                    <button type="button" class="btn btn-rounded btn-outline-info">Info</button>
                    <button type="button" class="btn btn-rounded btn-outline-light">Light</button>
                    <button type="button" class="btn btn-rounded btn-outline-dark">Dark</button>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-12">
        <div class="card">
            <div class="card-header d-block">
                <h4 class="card-title">Button Right icons</h4>
                <p class="mb-0 subtitle">add <code>.btn-icon-right</code> to change the style</p>
            </div>
            <div class="card-body">
                <button type="button" class="btn btn-primary">Add to cart <span class="btn-icon-right"><i class="fa fa-shopping-cart"></i></span>
                </button>
                <button type="button" class="btn btn-info">Add to wishlist <span class="btn-icon-right"><i class="fa fa-heart"></i></span>
                </button>
                <button type="button" class="btn btn-danger">Remove <span class="btn-icon-right"><i class="fa fa-close"></i></span>
                </button>
                <button type="button" class="btn btn-secondary">Sent message <span class="btn-icon-right"><i class="fa fa-envelope"></i></span>
                </button>
                <button type="button" class="btn btn-warning">Add bookmark <span class="btn-icon-right"><i class="fa fa-star"></i></span>
                </button>
                <button type="button" class="btn btn-success">Success <span class="btn-icon-right"><i class="fa fa-check"></i></span>
                </button>
            </div>
        </div>
    </div>
    <div class="col-lg-12">
        <div class="card">
            <div class="card-header d-block">
                <h4 class="card-title">Button Left icons</h4>
                <p class="mb-0 subtitle">add <code>.btn-icon-left</code> to change the style</p>
            </div>
            <div class="card-body">
                <button type="button" class="btn btn-rounded btn-primary"><span class="btn-icon-left text-primary"><i class="fa fa-shopping-cart"></i>
</span>Buy</button>
                <button type="button" class="btn btn-rounded btn-info"><span class="btn-icon-left text-info"><i class="fa fa-plus color-info"></i>
</span>Add</button>
                <button type="button" class="btn btn-rounded btn-danger"><span class="btn-icon-left text-danger"><i class="fa fa-envelope color-danger"></i>
</span>Email</button>
                <button type="button" class="btn btn-rounded btn-secondary"><span class="btn-icon-left text-secondary"><i class="fa fa-share-alt color-secondary"></i> </span>Share</button>
                <button type="button" class="btn btn-rounded btn-warning"><span class="btn-icon-left text-warning"><i class="fa fa-download color-warning"></i>
</span>Download</button>
                <button type="button" class="btn btn-rounded btn-success"><span class="btn-icon-left text-success"><i class="fa fa-upload color-success"></i>
</span>Upload</button>
            </div>
        </div>
    </div>
    <div class="col-lg-12">
        <div class="card">
            <div class="card-header d-block">
                <h4 class="card-title">Square Buttons</h4>
                <p class="mb-0 subtitle">add <code>.btn-square</code> to change the style</p>
            </div>
            <div class="card-body">
                <button type="button" class="btn  btn-square btn-primary">Primary</button>
                <button type="button" class="btn  btn-square btn-secondary">Secondary</button>
                <button type="button" class="btn  btn-square btn-success">Success</button>
                <button type="button" class="btn  btn-square btn-danger">Danger</button>
                <button type="button" class="btn  btn-square btn-warning">Warning</button>
                <button type="button" class="btn  btn-square btn-info">Info</button>
                <button type="button" class="btn  btn-square btn-light">Light</button>
                <button type="button" class="btn  btn-square btn-dark">Dark</button>
            </div>
        </div>
    </div>
    <div class="col-lg-12">
        <div class="card">
            <div class="card-header d-block">
                <h4 class="card-title">Square Outline Buttons</h4>
                <p class="mb-0 subtitle">add <code>.btn-square</code> to change the style</p>
            </div>
            <div class="card-body">
                <button type="button" class="btn btn-square btn-outline-primary">Primary</button>
                <button type="button" class="btn btn-square btn-outline-secondary">Secondary</button>
                <button type="button" class="btn btn-square btn-outline-success">Success</button>
                <button type="button" class="btn btn-square btn-outline-danger">Danger</button>
                <button type="button" class="btn btn-square btn-outline-warning">Warning</button>
                <button type="button" class="btn btn-square btn-outline-info">Info</button>
                <button type="button" class="btn btn-square btn-outline-light">Light</button>
                <button type="button" class="btn btn-square btn-outline-dark">Dark</button>
            </div>
        </div>
    </div>
    <div class="col-lg-12">
        <div class="card">
            <div class="card-header d-block">
                <h4 class="card-title">Rounded Button</h4>
                <p class="mb-0 subtitle">add <code>.btn-rounded</code> to change the style</p>
            </div>
            <div class="card-body">
                <button type="button" class="btn btn-rounded btn-primary">Primary</button>
                <button type="button" class="btn btn-rounded btn-secondary">Secondary</button>
                <button type="button" class="btn btn-rounded btn-success">Success</button>
                <button type="button" class="btn btn-rounded btn-danger">Danger</button>
                <button type="button" class="btn btn-rounded btn-warning">Warning</button>
                <button type="button" class="btn btn-rounded btn-info">Info</button>
                <button type="button" class="btn btn-rounded btn-light">Light</button>
                <button type="button" class="btn btn-rounded btn-dark">Dark</button>
            </div>
        </div>
    </div>
    <div class="col-lg-12">
        <div class="card">
            <div class="card-header d-block">
                <h4 class="card-title">Rounded outline Buttons</h4>
                <p class="mb-0 subtitle">add <code>.btn-rounded</code> to change the style</p>
            </div>
            <div class="card-body">
                <button type="button" class="btn btn-rounded btn-outline-primary">Primary</button>
                <button type="button" class="btn btn-rounded btn-outline-secondary">Secondary</button>
                <button type="button" class="btn btn-rounded btn-outline-success">Success</button>
                <button type="button" class="btn btn-rounded btn-outline-danger">Danger</button>
                <button type="button" class="btn btn-rounded btn-outline-warning">Warning</button>
                <button type="button" class="btn btn-rounded btn-outline-info">Info</button>
                <button type="button" class="btn btn-rounded btn-outline-light">Light</button>
                <button type="button" class="btn btn-rounded btn-outline-dark">Dark</button>
            </div>
        </div>
    </div>

    <div class="col-lg-12">
        <div class="card">
            <div class="card-header d-block">
                <h4 class="card-title">Buttons Transparent</h4>
                <p class="mb-0 subtitle">Button transparent style</p>
            </div>
            <div class="card-body">
                <button type="button" class="btn tp-btn btn-primary">Primary</button>
                <button type="button" class="btn tp-btn btn-secondary">Secondary</button>
                <button type="button" class="btn tp-btn btn-success">Success</button>
                <button type="button" class="btn tp-btn btn-danger">Danger</button>
                <button type="button" class="btn tp-btn btn-warning">Warning</button>
                <button type="button" class="btn tp-btn btn-info">Info</button>
                <button type="button" class="btn tp-btn btn-light">Light</button>
                <button type="button" class="btn tp-btn btn-dark">Dark</button>
            </div>
        </div>
    </div>
    <div class="col-lg-12">
        <div class="card">
            <div class="card-header d-block">
                <h4 class="card-title">Buttons Transparent Light</h4>
                <p class="mb-0 subtitle">Button transparent light style</p>
            </div>
            <div class="card-body">
                <button type="button" class="btn tp-btn-light btn-primary">Primary</button>
                <button type="button" class="btn tp-btn-light btn-secondary">Secondary</button>
                <button type="button" class="btn tp-btn-light btn-success">Success</button>
                <button type="button" class="btn tp-btn-light btn-danger">Danger</button>
                <button type="button" class="btn tp-btn-light btn-warning">Warning</button>
                <button type="button" class="btn tp-btn-light btn-info">Info</button>
                <button type="button" class="btn tp-btn-light btn-light text-black">Light</button>
                <button type="button" class="btn tp-btn-light btn-dark">Dark</button>
            </div>
        </div>
    </div>
    <div class="col-lg-12">
        <div class="card">
            <div class="card-header d-block">
                <h4 class="card-title">Disabled Button</h4>
                <p class="mb-0 subtitle">add <code>disabled="disabled"</code> to change the style</p>
            </div>
            <div class="card-body">
                <button type="button" class="btn btn-rounded btn-primary" disabled="disabled">Primary</button>
                <button type="button" class="btn btn-rounded btn-secondary" disabled="disabled">Secondary</button>
                <button type="button" class="btn btn-rounded btn-success" disabled="disabled">Success</button>
                <button type="button" class="btn btn-rounded btn-danger" disabled="disabled">Danger</button>
                <button type="button" class="btn btn-rounded btn-warning" disabled="disabled">Warning</button>
                <button type="button" class="btn btn-rounded btn-info" disabled="disabled">Info</button>
            </div>
        </div>
    </div>
</div>
<?php view_include('footer'); ?>
</body>
</html>
